{% extends "tools/base_tool.html" %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">颜色选择器</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="colorPicker" class="form-label">选择颜色：</label>
                        <div class="input-group">
                            <span class="input-group-text">color picker:</span>
                            <input type="color" class="form-control form-control-color" id="colorPicker" value="#1ea54c" title="选择颜色">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text">hex:</span>
                            <input type="text" class="form-control" id="hexColor" value="#1ea54c">
                            <button class="btn btn-outline-secondary copy-btn" type="button" data-clipboard-target="#hexColor">
                                <i class="feather-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text">rgb:</span>
                            <input type="text" class="form-control" id="rgbColor" value="rgb(30, 165, 76)">
                            <button class="btn btn-outline-secondary copy-btn" type="button" data-clipboard-target="#rgbColor">
                                <i class="feather-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text">hsl:</span>
                            <input type="text" class="form-control" id="hslColor" value="hsl(140, 69%, 38%)">
                            <button class="btn btn-outline-secondary copy-btn" type="button" data-clipboard-target="#hslColor">
                                <i class="feather-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text">hwb:</span>
                            <input type="text" class="form-control" id="hwbColor" value="hwb(140 12% 35%)">
                            <button class="btn btn-outline-secondary copy-btn" type="button" data-clipboard-target="#hwbColor">
                                <i class="feather-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text">lch:</span>
                            <input type="text" class="form-control" id="lchColor" value="lch(59.62% 61.82 145.05)">
                            <button class="btn btn-outline-secondary copy-btn" type="button" data-clipboard-target="#lchColor">
                                <i class="feather-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text">cmyk:</span>
                            <input type="text" class="form-control" id="cmykColor" value="device-cmyk(82% 0% 54% 35%)">
                            <button class="btn btn-outline-secondary copy-btn" type="button" data-clipboard-target="#cmykColor">
                                <i class="feather-copy"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text">name:</span>
                            <input type="text" class="form-control" id="colorName" value="seagreen">
                            <button class="btn btn-outline-secondary copy-btn" type="button" data-clipboard-target="#colorName">
                                <i class="feather-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">颜色预览</h5>
                </div>
                <div class="card-body">
                    <div class="color-preview-container">
                        <div id="colorPreview" class="color-preview"></div>
                    </div>
                    
                    <div class="mt-4">
                        <h6>色彩选择器</h6>
                        <div id="colorPickerAdvanced" class="color-picker-advanced"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/color-picker.css">
<link rel="stylesheet" href="/node_modules/@simonwep/pickr/dist/themes/classic.min.css">
{% endblock %}

{% block scripts %}
<script src="/node_modules/clipboard/dist/clipboard.min.js"></script>
<script src="/node_modules/@simonwep/pickr/dist/pickr.min.js"></script>
<script src="/static/js/color-picker.js"></script>
{% endblock %}